<template>
  <div class='article-add'>
    <el-form :model="content" :rules="formRules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
    <el-form-item label="文章标题" prop="title">
    <el-input v-model="content.title"></el-input>
    </el-form-item>
      <div class="add-contents">
      <el-form-item label="文章内容" prop="title">
      <quill-editor :options="editorOption" v-model="content.articleBody" class="add-content" type="text"></quill-editor>
      </el-form-item>
      </div>
   <el-form-item class="add-vide" label="视频地址" >
          <el-input v-model="content.videoURL" ></el-input>
   </el-form-item>
    </el-form>
        <el-button class="btn-no" @click="exitVisible">取 消</el-button>
        <el-button class="btn-add" type="primary" @click="addVisible">确 定</el-button>
  </div>

</template>

<script>
import Vue from 'vue'
import VueQuiLLEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add } from '@/api/hmmm/articles'
Vue.use(VueQuiLLEditor)

export default {
    name:'ArticlesAdd',
    
    data(){
      return{
         cum:this.content,
      //   formModel: {
      //  id: null,
      //   title: null,
      //   articleBody: null,
      //   videoURL: null
      // },
      
         editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }], // 显示有序和无序列表
            ["image"],
            ["link"], // 显示超链接
          ],
        },
      },
        formRules: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
          ],
          articleBody: [
          { required: true, message: '请输入文章内容', tirgger: 'blur' }
        ]
        },
        
      }
    },
    props: {
    content: {
      type:Object,
      required:true
     
  },
    },
    mounted(){
    },
    methods:{
   async addVisible(){
           await add(this.cum)
         this.$emit('onLoading')
         this.cum= {}
      },
      exitVisible(){
        this.$emit('exitLoading')
      }
    }
}
</script>

<style scoped lang='scss'>
.add-contents{
  padding-left: 3px;
}
.add-content{
  width: 534px;
  margin-bottom:5px;
}
::v-deep .ql-container{
  height: 300px !important;
}
.add-span{
  position: absolute;
  top: 142px;
    left: 53px;
      font-size: 14px;
    color: #606266;
}
.btn-add{
position: absolute;
right: 20px;
bottom: 10px;
}
.btn-no{
position: absolute;
right:100px;
bottom: 10px;
}
</style>
